import React from 'react';
import { Card, Divider, Space } from 'antd-mobile';
import './index.less';
import { DeleteOutline, EditSOutline, GlobalOutline, UploadOutline } from 'antd-mobile-icons';
interface Props {
  data: API.AccountDto,
  onEdit:(account:API.AccountDto) => void
  onRemove:(account:API.AccountDto) => void
  onLogin:(account:API.AccountDto) => void
  onUploadProfile:(account:API.AccountDto) => void
}
const BoardingPass = (props:Props) => {
  const { data = {} } = props;
  return (
        <Card
          title={data.email}
          extra={data.currentBoarding?.phone_Mobile}
          className='board-card'
        >
          <div>
              <div className="board-item">
                <div>
                  <h4>姓名</h4>
                  <p>{data.currentBoarding?.last_Name} {data.currentBoarding?.first_Name}</p>
                </div>
                <div className='right'>
                  <h4>出生日期</h4>
                  <p>{data.currentBoarding?.birthday}</p>
                </div>
              </div>
              <div className="board-item">
                <div>
                  <h4>航班号</h4>
                  <p>{data.currentBoarding?.airlinesNo}{data.currentBoarding?.flightNo}</p>
                </div>
                <div className='right'>
                  <h4>出发时间</h4>
                  <p>{data.currentBoarding?.departureDate} {data.currentBoarding?.departureTime}</p>
                </div>
              </div>
              <Divider />
              <div className="board-item">
                <div>
                  <h4>上次登录</h4>
                  <p>{data.lastLoginTime}</p>
                </div>
                <div className='right'>
                  <h4>资料同步时间</h4>
                  <p>{data.currentBoarding?.syncTime}</p>
                </div>
              </div>
          </div>
          <Divider />
          <Space justify='center'>
              <div className='boarding-btn' onClick={()=>props.onEdit(data)}>
                  <EditSOutline fontSize={16}/>
                  <span>编辑</span>
              </div>
              <div className='boarding-btn'  onClick={()=>props.onRemove(data)}>
                  <DeleteOutline fontSize={16} />
                  <span>删除</span>
              </div>
              <div className='boarding-btn' onClick={()=>props.onLogin(data)}>
                  <GlobalOutline fontSize={16} />
                  <span>手动登录</span>
              </div>
              {data.currentBoarding && (
                <div className='boarding-btn' onClick={()=>props.onUploadProfile(data)}>
                    <UploadOutline fontSize={16} />
                    <span>手动同步</span>
                </div>
            )}
          </Space>
      </Card>
  );
};

export default BoardingPass;
